import React, {Component} from 'react';
import {
  Form,
  Input,
  Select,
  Button,
  Checkbox,
  Radio,
  Modal,
  Icon,
  message,
  Card,
  AutoComplete,
} from 'antd';
import myaxios, {get, put, post} from 'common/fetch';
import {SEARCH_USER_INFO_URL, CATEGORY_URL} from 'constant/url';

const RadioGroup = Radio.Group,
  FormItem = Form.Item,
    TextArea = Input.TextArea;

class Classfication extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categoryId: null,
      authorName: '',
      categoryList: [],
      channel: 0,
      videoInfo:'',
      channelArray: [
        {
          id: 0,
          name: '众车轮',
        },
        {
          id: 1,
          name: '精品文章',
        },
      ],
      authorNameList: [],
      authorList: [],
      vehicleIdList: [],
    };
  }
  componentDidMount() {
    this.setState({
      categoryId:
        this.props.postDetail.categoryId &&
        this.props.postDetail.categoryId.toString(),
      vehicleIdList: this.props.postDetail.carIds
        ? this.props.postDetail.carIds.split(',')
        : [],
      authorNameList: this.props.postDetail.authorNames
        ? this.props.postDetail.authorNames.split(',')
        : [],
      authorName: this.props.postDetail.authorName,
      channel:
        this.props.postDetail.channel != undefined && this.props.postDetail.channel != null && this.props.postDetail.channel.toString(),
      videoInfo:this.props.postDetail.videoInfo
    });
    this.queryAllKfUser({});
    this.queryUserList();
  }
  // 获取文章分类
  queryAllKfUser() {
    get(CATEGORY_URL, {}).then(res => {
      this.setState({
        categoryList: res,
      });
    });
  }
  // 获取用户列表
  queryUserList(namePrefix = '') {
    get(SEARCH_USER_INFO_URL, {namePrefix}).then(res => {
      const authorList = [];
      res.map(item => {
        if (authorList.indexOf(item.accountName) == -1) {
          authorList.push(item.accountName);
        }
      });
      this.setState({
        authorList,
        authorListRes: res,
      });
      console.log('queryUserList queryUserList');
      console.log(res);
    });
  }
  // 选择文章分类
  onRadioChange = e => {
    const categoryId = e.target.value;
    this.setState({
      categoryId,
    });
  };
  // 选择发布渠道
  onChannelRadioChange = e => {
    const channel = e.target.value;
    this.setState({
      channel,
    });
  };
  // 填写车辆ID
  onVehicleIdChange = value => {
    this.setState({
      vehicleIdList: value,
    });
  };
  //关联视频
  onVideoInfoChange = e => {
    this.setState({
      videoInfo: e.target.value,
    });
  };
  // 确认按钮
  handleOk() {
    const authorName = this.state.authorName;
    const authorListRes = [...this.state.authorListRes];
    let authorId;
    authorListRes.map(item => {
      if (item.accountName === authorName) {
        authorId = item.id;
      }
    });
    this.props.updateState({
      categoryId: this.state.categoryId,
      carIds: this.state.vehicleIdList.join(','),
      channel: this.state.channel,
      authorId,
      authorName,
      videoInfo:this.state.videoInfo 
      //authorNames:this.state.authorIdList.join(","),
    });
    this.props.hidePanel();
  }
  handleSearch = value => {
    this.setState({authorName: value});
    // this.queryUserList(value, data => this.setState({ data }));
    this.queryUserList(value);
  };
  render() {
    const {
      categoryId,
      channel,
      categoryList,
      channelArray,
      vehicleIdList,
      authorNameList,
      authorList,
      authorName,
        videoInfo,
    } = this.state;
    const {postDetail} = this.props;
    const domWarning = (
      <div>
        <div className="tac">
          <Icon type="close-circle-o" />
        </div>
        <div className="tac mt15">请选择客服后再提交</div>
      </div>
    );

    const categoryListRadios = categoryList.map((ele, index) => {
      return (
        <Radio style={{width: '100px'}} value={ele.id.toString()} key={index}>
          {ele.name}
        </Radio>
      );
    });
    const channelListRadios = channelArray.map((ele, index) => {
      return (
        <Radio style={{width: '100px'}} value={ele.id.toString()} key={index}>
          {ele.name}
        </Radio>
      );
    });
    return (
      <div>
        <h5 className="panel-custom-title">设置</h5>
        <Card title="发布渠道" style={{margin: 20}} bordered={false}>
          <div className="msg-assign-wrapper">
            <div>
              <div className="mb10">请选择发布渠道：</div>
              <div className="mt10">
                <RadioGroup
                  onChange={this.onChannelRadioChange}
                  value={channel}>
                  {channelListRadios}
                </RadioGroup>
              </div>
            </div>
          </div>
        </Card>
        <Card title="分类" style={{margin: 20}} bordered={false}>
          <div className="msg-assign-wrapper">
            <div>
              <div className="mb10">请选择文章分类：</div>
              <div className="mt10">
                <RadioGroup onChange={this.onRadioChange} value={categoryId}>
                  {categoryListRadios}
                </RadioGroup>
              </div>
            </div>
          </div>
        </Card>
        <Card
          title="作者"
          style={{margin: 20, marginBottom: 0}}
          bordered={false}>
          <div className="msg-assign-wrapper">
            <div>
              <div className="mb10">请输入作者名称：</div>
              <div className="mt10">
                <FormItem>
                  {/* <AutoComplete
                    value={authorName}
                    onSearch={this.handleSearch.bind(this)}
                    dataSource={['1', '2', '3']}
                    placeholder="请输入文章作者">
                    <Input
                      suffix={
                        <Icon type="search" className="certain-category-icon" />
                      }
                    />}
                  </AutoComplete> */}
                  <Select
                    mode="combobox"
                    value={authorName}
                    placeholder="请输入文章作者"
                    defaultActiveFirstOption={false}
                    showArrow={false}
                    filterOption={false}
                    onChange={this.handleSearch}
                    style={{width: '200px'}}>
                    {this.state.authorList.map(d => (
                      <Select.Option key={d}>{d}</Select.Option>
                    ))}
                  </Select>
                </FormItem>
              </div>
            </div>
          </div>
        </Card>
        <Card title="车辆" style={{margin: 20, marginTop: 0}} bordered={false}>
          <div className="msg-assign-wrapper">
            <div>
              <div className="mb10">请输入车辆ID：</div>
              <div className="mt10">
                <FormItem>
                  {/* <Input ref="vehicleID" autoFocus placeholder="请输入车辆ID" /> */}
                  <Select
                    mode="tags"
                    placeholder="请输入车辆ID"
                    onChange={this.onVehicleIdChange}
                    style={{width: '100%'}}
                    value={vehicleIdList}>
                    {vehicleIdList.map((item, index) => {
                      return <Select.Option key={item}>{item}</Select.Option>;
                    })}
                  </Select>
                </FormItem>
              </div>
            </div>
          </div>
        </Card>
        <Card title="关联视频" style={{margin: 20}} bordered={false}>
          <div className="msg-assign-wrapper">
            <div>
              <div className="mb10">请粘贴视频分享内容：</div>
              <div className="mt10">
                    <TextArea onChange={this.onVideoInfoChange} value={videoInfo} rows={4} placeholder="请粘贴视频分享内容"/>
              </div>
            </div>
          </div>
        </Card>
        <Button
          type="primary"
          className="mt30 ml20"
          onClick={this.handleOk.bind(this)}>
          确定
        </Button>
      </div>
    );
  }
}

export default Classfication;
